<template>
    <div class="footer">
      <!--相关内容-->
      <el-row :gutter="24" class="container m-mobile-hide" style="margin-right:0;margin-left:0;">
        <el-col :span="4" v-for="item in menus" :key="item.key" v-if="item.menus!=null && item.menus.length>0">
          <div class="text">
            <h3>
              <a @click="putsUrl(item.key)">
                {{item.value}}
              </a>
            </h3>
            <el-link v-if="itm.key!='' && itm.key!=null" v-for="(itm,index) in item.menus" :key="index" @click="putsUrl(itm.key+'?'+(index+1))" class="link-back" :underline="false">
              {{itm.value}}
            </el-link>
            <div v-if="itm.menus!=null" v-for="(itm,index) in item.menus" :key="index" >
              {{itm.value}}
              <el-link v-for="(it,it_index) in itm.menus" :key="it_index" @click="putsUrl(it.key+'?'+(it.type)+'-'+(it_index+1))" class="link-back" :underline="false">
                {{it.value}}
              </el-link>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="text">
            <h3>人力资源</h3>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="text">
            <h3>合作伙伴</h3>
          </div>
        </el-col>
      </el-row>
      <hr/>
      <!--联系方式-->
      <el-row>
        <el-col :span="24" class="contact">
          <div class="div-inline"><i class="el-icon-location-outline"></i> 地址：{{contactData.address}}</div>
          <div class="div-inline"><i class="el-icon-phone"></i> 电话：{{contactData.phone}}</div>
          <div class="div-inline"><i class="el-icon-mobile-phone"></i> 手机：{{contactData.mobilePhone}}</div>
          <div class="div-inline"><i class="el-icon-chat-square"></i> 邮箱：{{contactData.email}}</div>
        </el-col>
      </el-row>
      <hr/>
      <!--版权信息-->
      <div class="contact">
        <el-row>
          <el-col :span="24">
            <div class="div-inline">
              Copyright © 2017 哈工科迅 版权所有
              <a href="#">xxxxxxx</a>
            </div>
            <div class="div-inline">友情链接：</div>
          </el-col>
        </el-row>
      </div>
    </div>
</template>
<!--页脚-->
<script>
    export default {
        name: "CommonFooter",
        data(){
            return{
                contactData:{
                    address:"哈尔滨市群里第五大道广发银行",
                    phone:"123456789",
                    mobilePhone:"123456789",
                    email:"123456789@hgkx.com"
                },
                menus:[
                    {
                        key:"/home",
                        value:"首页",
                        url:"/home",
                        menus:null
                    },{
                        key:"/productcenter",
                        value:"产品中心",
                        image:'https://www.huashine.net/images/navbg/02.png',
                        menus:[
                            {
                                key:"",
                                value:"系统",
                                type:1,
                                menus:[
                                    {
                                        key:"/productcenter",
                                        value:"环形穿梭车系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"高速分拣系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"四向车系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"WMS",
                                        type:1,
                                    },
                                ]
                            },{
                                key:"",
                                value:"单机",
                                type:2,
                                menus:[
                                    {
                                        key:"/productcenter",
                                        value:"堆垛机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"RGV",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"升降机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"输送机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"拆-叠盘机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"机器人",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"旋转站台",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"字母车",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"AGV",
                                        type:2,
                                    }
                                ]
                            }
                        ]
                    },{
                        key:"/engineering",
                        value:"工程案例",
                        image:'https://www.huashine.net/images/navbg/04.png',
                        menus:[
                            {
                                key:"/engineering",
                                value:"粮油行业",
                            },{
                                key:"/engineering",
                                value:"造纸行业",
                            },{
                                key:"/engineering",
                                value:"化工化纤行业",
                            },{
                                key:"/engineering",
                                value:"食品饮料行业",
                            },{
                                key:"/engineering",
                                value:"电子＆电器行业",
                            },{
                                key:"/engineering",
                                value:"医药行业",
                            },{
                                key:"/engineering",
                                value:"汽车＆机械制造行业",
                            },
                        ]
                    },{
                        key:"/newsCenter",
                        value:"新闻中心",
                        image:"https://www.huashine.net/images/navbg/06.png",
                        menus:[
                            {
                                key:"/newsCenter",
                                value:"公司新闻",
                            },{
                                key:"/newsCenter",
                                value:"行业新闻",
                            }
                        ]
                    },{
                        key:"/aboutUs",
                        value:"关于我们",
                        image:"http://8.130.94.42:8080/hgkx/image/2023/07/20/4062c820-e431-4e66-ad5b-d8d1f2ec8ecc.png",
                        menus:[
                            {
                                key:"/aboutUs",
                                value:"公司简介",
                            },{
                                key:"/aboutUs",
                                value:"发展历程",
                            },{
                                key:"/aboutUs",
                                value:"业务研发",
                            },{
                                key:"/aboutUs",
                                value:"企业文化",
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            putsUrl(url){
                this.$router.push(url);
            }
        }
    }
</script>

<style scoped>
.footer{
  background-color: #1e1e1e;
  color: #ffffff;
  margin: 0;
}
@media screen and (max-width: 768px){
  .m-mobile-hide{
    display: none !important;
  }
  .div-inline{
    padding: 10px;
  }
}
@media screen and (min-width: 768px){
  .div-inline{
    display: inline-block;
    padding: 10px;
  }
}
  .container{
    text-align: center;
    padding: 5%;
  }
  .text{
    text-align: left;
  }
  .link-back{
    display: block;
  }
  .contact{
    color: #5a6666;
    font-size: 14px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 5%;
  }

  hr{
    background-color: #2b2b2b;
    height:1px;
    border:none;
  }
  a{
    color: #ffffff;
  }
</style>
